<template>
  <div class="newLayoutStyle">
    <main-layout>
      <div class="list-container">
        <auth-tag code="8006|8007" tips="无权访问">
          <vTable   
             ref="xTableList"
            :columnsList="columnsList"
            apiUrl="boss/tanc_plantint_plan_task/list"
            :pageSize="15"
            :formConfig="formConfig"
            :toolbarConfig="true"
            :refresh ="false"
            :zoom ="false"
            :custom="false"
            @saveClick="goAddPopup"
            :queryData="{
              queryEntry:1,
              companyId:userStore.userInfo.companyId,
              farmId:userStore.userInfo.farmId}">  
             <template #actions="{row}">
                <auth-tag code="8007">
                  <el-button icon="view" class="btn-view" size="small" @click="goDetail(row,1)">详情</el-button>
                </auth-tag>
              </template>
              <template #toolbar_buttons>
                <bar-title class="totalTips" title="农事" style="margin-bottom: 10px;width:100%">
                  <span>共计：</span><em style="color: #333;">{{ statistics.totalNum || 0 }}</em>
                  <span>待处理：</span><em style="color: #FF9C00;">{{ statistics.dclNum || 0 }}</em>
                  <span>处理中：</span><em style="color: #3A92FF;">{{ statistics.clzNum || 0 }}</em>
                  <span>已延期：</span><em style="color: #ff7449;">{{ statistics.yyqNum || 0 }}</em>
                  <span>已取消：</span><em style="color: #7e7e7e;">{{ statistics.yqxNum || 0 }}</em>
                  <span>已完成：</span><em style="color: #04AE70;">{{ statistics.ywcNum || 0 }}</em>
                </bar-title>
            </template>
        </vTable>
        </auth-tag>
       </div>
    </main-layout>
  </div>
</template>

<script setup name="Manage-Task-List">
import { ref, onMounted,computed} from 'vue'
import { useRouter } from 'vue-router'
import { getPlantTaskStatistics } from '@/api/plant'
import mainLayout from '@/components/custom/mainLayout.vue'
import { formatDate } from '@/utils/format'
import { useUserStore } from '@/pinia/modules/user'
import { message } from '@/utils/element'
import { getColor } from '@/utils/statusColor'
import barTitle from './components/barTitle.vue'
import {getSelectList,getTeamList,getPlanSelectList} from '@/api/select'
const router = useRouter()
const userStore = useUserStore()

const page = ref(1)
const limit = ref(10)
const searchInfo = ref({})
const statistics = ref({})
const itemData = ref({})
const plantingPlanList = ref([])
const planStatusList = ref([])
const statusList = ref([])
const cropList = ref([])
const userSelectList = ref([])
const xTableList = ref(null)
const cropSeriesIdValue = ref('')
const cropSeriesList = ref([])
const statusTaskList = ref([])

const columnsList = ref([
        {field: 'number', title: '编号',minWidth:'90',align:'center'},
        {field: 'name', title: '方案',minWidth:'130',align:'center'},
        {field: 'statusMeaning', title: '方案状态',minWidth:'130',align:'center'},
        {field: 'taskName', title: '农事任务',minWidth:'110',align:'center'},
        {field: 'taskStatusMeaning',minWidth:'110', title: '任务状态',align:'center', type:'html',
         formatter:({row})=>{ return `<div style="color:${getColor(row.taskStatus)};">${row.taskStatusMeaning}</div>`}
      },
      {field: 'fzRealName', title: '负责人',minWidth:'110',align:'center',slots:{
          default:({row})=>{
            let obj = JSON.parse(row.fuzeUserJstr||'{}')?.fzuserLineRspList ||[]
            return obj.map((item)=>item.realName).join(',')
          }
        }},
      {field: 'startTime', title: '完成日期',align:'center',minWidth:'180',slots:{
          default:({row})=>{
            return [formatDate(row.taskStartTime)+' ~ '+formatDate(row.taskEndTime)]
          }
        }},
        {title: '操作', width: 120,fixed:'right', slots: {default: 'actions'}}
  ])

  const  formConfig = computed(
    ()=>{
    return {
        titleWidth: 100,
        titleAlign: 'center',
        items: [
        {
            field: 'plantingPlanId',
            title: '方案',
            span: 5,
            itemRender: {
              name: '$select',
              props: {
                placeholder: '请选择',
                clearable: true,
                options:plantingPlanList
              }
            }
          },
          {
            field: 'status',
            title: '方案状态',
            span: 5,
            itemRender: {
              name: '$select',
              props: {
                placeholder: '请选择',
                clearable: true,
                options: planStatusList
              }
            }
          },
          {
            field: 'cropId',
            title: '作物',
            span: 5,
            itemRender: {
              name: '$select',
              props: {
                placeholder: '请选择',
                clearable: true,
                options:cropList
              },
              events: { change: (row,data)=>{
                  cropSeriesIdValue.value=''
                  getSeriesSelectList(data.value)
              } },
            }
          },
          {
            field: 'cropSeriesId',
            title: '品种',
            span: 5,
            itemRender: {
              defaultValue:cropSeriesIdValue,
              content:cropSeriesIdValue,
              name: '$select',
              props: {
                placeholder: '请选择',
                clearable: true,
                options:cropSeriesList
              }
            }
          },
          {
            field: 'taskId',
            title: '农事任务',
            span: 5, 
            itemRender: {
              name: '$select',
              props: {
                placeholder: '请选择',
                clearable: true,
                options: statusTaskList
              }
            }
          },
          {
            field: 'taskStatus',
            title: '任务状态',
            span: 5,
            itemRender: {
              name: '$select',
              props: {
                placeholder: '请选择',
                clearable: true,
                options: statusList
              }
            }
          },
          {
            field: 'fzUserId',
            title: '负责人',
            span: 5,
            itemRender: {
              name: '$select',
              props: {
                placeholder: '请选择',
                clearable: true,
                options:userSelectList
              }
            }
          },
          {
            field: 'dateRange',
            title: '完成日期',
            span: 5,
            slots: { default: 'dateRange' },
            itemRender:{}
          },
          {
            align: 'center', collapseNode: false,
            itemRender: {
              name: '$buttons',
              children: [
                {props: {type: 'submit', icon: 'vxe-icon-search', content: '查询', status: 'primary'}, 
                events: { click: (row,data)=>{
                  let params={}
                  if(row.data.dateRange&&row.data.dateRange.length){
                    params={
                      taskEndTime:row.data.dateRange[1],
                      taskStartTime:row.data.dateRange[0]
                    }
                  }
                  get_Plant_Task_Statistics({...row.data,...params})
              }}},
                {props: {type: 'reset', icon: 'vxe-icon-refresh', content: '重置'},events: { click: (row,data)=>{
                  get_Plant_Task_Statistics({})
                }}}
              ]
            }
          }
        ]
    }
  })

onMounted(async() => {
  get_Plant_Task_Statistics(searchInfo.value)
  getSelectDataList()
})

const getSeriesSelectList = async (cropId)=>{
    cropSeriesList.value = await  getSelectList({ page: 1, limit: 100,param1:cropId,lovCode:'TANC_ALL_SERIES'})
  }


const getSelectDataList = async ()=>{
      userSelectList.value = await  getTeamList({ page: 1, limit: 100, isEnable:1, farmId: userStore.userInfo.farmId, companyId: userStore.userInfo.companyId})
      plantingPlanList.value = await  getPlanSelectList({ page: 1, limit: 100,queryEntry:2, farmId: userStore.userInfo.farmId})
      statusList.value = await  getSelectList({ page: 1, limit: 100,lovCode:'TANC_TASK_STATUS'})
      cropList.value = await  getSelectList({ page: 1, limit: 100,lovCode:'TANC_CROP'})
      planStatusList.value = await  getSelectList({ page: 1, limit: 100,lovCode:'TANC_PLANT_STATUS'})
      statusTaskList.value = await  getSelectList({ page: 1, limit: 100,lovCode:'TANC_STAGE_TASK'})
      
  }

const get_Plant_Task_Statistics = async(params) => {
  const res = await getPlantTaskStatistics({
    companyId: userStore.userInfo.companyId,
    farmId: userStore.userInfo.farmId,
    page: page.value,
    limit: limit.value,
    queryEntry: 1, // 种植后台固定为1
    ...params
  })
  if (res.success || res.code == 0) {
    statistics.value = res.data || {}
  } else {
    statistics.value = {}
    message(res.message || '获取数据出错了', 3)
  }
}

const goDetail = async(item, type) => {
  itemData.value = item
  router.push(`/manage/task/detail?plantingPlanTaskId=${item.plantingPlanTaskId}`)
}

</script>

<style lang="scss" scoped>
.list-container {
  box-sizing: border-box;
  height: calc(100vh - 120px);
}
.totalTips {
  span{
    display: flex;
    margin: 0 0 0 25px;
    border-left: 1px solid #DCDCDC;
    padding: 0 0 0 25px;
    align-items: center;
    &::before{
      content: '';
      display: block;
      width: 7px;
      background: #999999;
      height: 7px;
      line-height: 0;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 7px 0 0;
    }
  }
  em{
    font-weight: bold;
    font-size: 14px;
  }
}
</style>
